<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>云创云盘 - 上传文件管理</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description"
          content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min.css?v=3.3.7" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">

    <script src="js/axios.min.js"></script>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        input[type=file] {
            display: none;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 120px;
            height: 120px;
            line-height: 120px;
            text-align: center;
        }

        .el-dropdown-link {
            cursor: pointer;
            color: #409EFF;
        }

        .el-icon-arrow-down {
            font-size: 12px;
        }

        .avatar {
            width: 120px;
            height: 120px;
            display: block;
        }
    </style>
</head>

<body class="gray-bg">
<div id="app" class="wrapper wrapper-content  animated fadeInRight">
    <div class="row">
        <div class="col-sm-8">
            <div class="ibox">
                <div class="ibox-content">
                    <span class="text-muted small pull-right">最后更新：<i
                            class="fa fa-clock-o"></i> 2015-09-01 12:00</span>
                    <h2>上传文件管理</h2>
                    <div class="input-group">
                        <el-upload
                                class="upload-demo"
                                action="http://localhost:7070/file/uploadFiles"
                                multiple
                                :on-remove="removeFile">
                            <!--                                :file-list="fileList">-->
                            <el-button size="small" type="primary">点击上传</el-button>
                        </el-upload>
                    </div>
                    <div class="clients-list">
                        <ul class="nav nav-tabs">
                        </ul>
                        <div class="tab-content">
                            <div id="tab-1" class="tab-pane active">
                                <div class="full-height-scroll">
                                    <div class="table-responsive">
                                        <template>
                                            <el-row>
                                                <el-table :data="tableData" style="width: 100%">
                                                    <el-table-column prop="fileName" label="文件名" width="250">
                                                    </el-table-column>
                                                    <el-table-column prop="fileSize" label="大小" width="180">
                                                    </el-table-column>
                                                    <el-table-column prop="createTime" label="创建时间">
                                                    </el-table-column>
                                                    <el-table-column
                                                            fixed="right"
                                                            label="操作"
                                                            width="100">
                                                        <template slot-scope="scope">
                                                            <el-button @click="handleClick(scope.row)" type="text"
                                                                       size="small">下载
                                                            </el-button>
                                                        </template>
                                                    </el-table-column>
                                                </el-table>
                                            </el-row>
                                        </template>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="ibox ">

                <div class="ibox-content">
                    <div class="tab-content">
                        <div id="contact-1" class="tab-pane active">
                            <div class="row m-b-lg">
                                <div class="col-lg-4 text-center">
                                    <h2 v-model="userName">{{ userName }}</h2>
                                    <div class="m-b-sm">
                                        <img alt="image" class="img-circle" :src="circleUrl" style="width: 62px">
                                    </div>
                                    <div>
                                        <el-dropdown>
                                              <span class="el-dropdown-link">
                                                更多操作<i class="el-icon-arrow-down el-icon--right"></i>
                                              </span>
                                            <el-dropdown-menu slot="dropdown">
                                                <el-dropdown-item @click.native="dropdownMethod()">修改信息
                                                </el-dropdown-item>
                                                <el-dropdown-item @click.native="centerDialogVisible = true">修改头像
                                                </el-dropdown-item>
                                            </el-dropdown-menu>
                                        </el-dropdown>
                                    </div>
                                </div>
                                <div>
                                    <el-button style="margin-left: 150px" size="small" @click="loginOut()">退出登录
                                    </el-button>
                                </div>
                            </div>
                            <div class="client-detail">
                                <div class="full-height-scroll">

                                    <strong>当前动态</strong>

                                    <ul class="list-group clear-list">
                                        <li class="list-group-item fist-item">
                                            <span class="pull-right"> 09:00</span> 请联系我
                                        </li>
<!--                                        <li class="list-group-item">-->
<!--                                            <span class="pull-right"> 10:16 </span> 签合同-->
<!--                                        </li>-->
<!--                                        <li class="list-group-item">-->
<!--                                            <span class="pull-right"> 08:22 </span> 开新公司-->
<!--                                        </li>-->
<!--                                        <li class="list-group-item">-->
<!--                                            <span class="pull-right"> 11:06 </span> 打电话给李四-->
<!--                                        </li>-->
                                    </ul>
                                    <strong>备注</strong>
                                    <p>
                                        40亿影帝黄渤先生明明可以靠脸吃饭，可是他却偏偏靠才华，唱歌居然也这么好听！
                                    </p>
                                    <hr/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <el-dialog :modal-append-to-body="false" :rules="rules" title="修改信息" width="35%"
               :visible.sync="dialogFormVisible">
        <el-form :model="ruleForm" status-icon hide-required-asterisk="false" :rules="rules" ref="ruleForm"
                 label-width="80px" class="demo-ruleForm">
            <el-form-item label="用户账号" prop="userAccount">
                <el-input v-model="ruleForm.userAccount"></el-input>
            </el-form-item>
            <el-form-item label="用户昵称" prop="userName">
                <el-input v-model="ruleForm.userName"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass">
                <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="电话" prop="phone">
                <el-input v-model="ruleForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="ruleForm.email"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">立即修改</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
                <el-button @click="dialogFormVisible = false">取 消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <el-dialog
            :modal-append-to-body="false"
            title="提示"
            :visible.sync="centerDialogVisible"
            width="20%"
            center="true">
        <span>
            <span>上传头像</span>
            <el-upload
                    class="avatar-uploader"
                    action="/user/upload"
                    :on-success="handleAvatarSuccess"
                    :show-file-list="false">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="centerDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
        </span>
    </el-dialog>

</div>

<!-- 全局js -->
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.7"></script>

<script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>

<!-- 自定义js -->
<script src="js/content.js?v=1.0.0"></script>

<script>
    $(function () {
        $('.full-height-scroll').slimScroll({
            height: '100%'
        });
    });
</script>

<script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>

<script>
    new Vue({
        el: '#app',
        data() {
            var validatePass = (rule, value, callback) => {
                console.log(value);
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.checkPass !== '') {
                        this.$refs.ruleForm.validateField('checkPass');
                    } else if (value.length < 6 || value.length > 8) {
                        callback(new Error('密码必须 6 到 8 位！'));
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.ruleForm.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                circleUrl: "",
                userName: "",
                tableData: [],
                dialogFormVisible: false,
                formLabelWidth: '120px',
                centerDialogVisible: false,
                checkPass: '',
                imageUrl: '',
                // fileList: [],
                ruleForm: {
                    userAccount: '',
                    userName: '',
                    password: '',
                    phone: '',
                    email: '',
                },
                rules: {
                    username: [
                        {required: true, message: '请输入用户名', trigger: 'blur'}
                    ],
                    phone: [
                        {required: true, message: '请输入电话', trigger: 'blur'}
                    ],
                    userEmail: [
                        {required: true, message: '请输入邮箱', trigger: 'blur'},
                        {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
                    ],
                    password: [
                        {validator: validatePass, trigger: 'blur'}
                    ],
                    checkPass: [
                        {validator: validatePass2, trigger: 'blur'}
                    ],
                }
            };
        },
        methods: {
            // 上传头像
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
                this.getUserMessage();
            },
            dropdownMethod() {
                this.dialogFormVisible = true;
                axios.get('http://localhost:7070/user/currentUser')
                    .then(response => {
                        this.ruleForm.userAccount = response.data.data.userAccount;
                        this.ruleForm.userName = response.data.data.userName;
                        this.ruleForm.password = response.data.data.password;
                        this.ruleForm.phone = response.data.data.phone;
                        this.ruleForm.email = response.data.data.email;
                        console.log(this.tableData);
                    })
                    .catch(error => {
                        console.error('获取服务器数据时出错：', error);
                    });
            },
            fetchServerData() {
                axios.get('http://localhost:7070/file/getAllFiles')
                    .then(response => {
                        this.tableData = response.data.data;
                        console.log(this.tableData);
                    })
                    .catch(error => {
                        console.error('获取服务器数据时出错：', error);
                    });
            },
            getUserMessage() {
                axios.get('http://localhost:7070/user/getUserMessage')
                    .then(response => {
                        console.log(response.data);
                        this.circleUrl = response.data.data.avatar;
                        this.userName = response.data.data.userName;
                    })
                    .catch(error => {
                        console.error('获取服务器数据时出错：', error);
                    });
            },
            loginOut() {
                axios.get('http://localhost:7070/user/loginOut')
                    .then(response => {
                        var code = response.data.code;
                        var message = response.data.message;
                        if (code == 2000) {
                            this.$message({
                                message: message,
                                type: 'success',
                            })
                            setTimeout(function () {
                                window.location.href = "/login.html";
                            }, 1200);
                        }
                    })
                    .catch(error => {
                        console.error('获取服务器数据时出错：', error);
                    });
            },
            // // 文件上传
            // removeFile() {
            //     this.$refs.upload.clearFiles()
            // },
            // 提交表单信息
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios.post("http://localhost:7070/user/update", this.ruleForm)
                            .then(response => {
                                console.log(response.data);
                                var code = response.data.code;
                                var message = response.data.message;
                                if (code === 2000) {
                                    this.$message({
                                        message: message,
                                        type: 'success'
                                    })
                                    setTimeout(function(){
                                        window.location.href = "/login.html";
                                    }, 1200);
                                } else {
                                    this.$message({
                                        message: message,
                                        type: 'error'
                                    })
                                }
                            })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
                this.dialogFormVisible = false
            },
            // 文件下载
            handleClick(row) {
                console.log(row); // 获取文件信息
                console.log(row.fileName);
                // axios.get('http://localhost:7070/file/downloadFile?fileName=' + row.fileName)
                //     .catch(error => {
                //         console.error('获取服务器数据时出错：', error);
                //     });
                axios({
                    url: 'http://localhost:7070/file/downloadFile',
                    method: 'GET',
                    responseType: 'blob',
                    params: {
                        fileName: row.fileName
                    }
                }).then(response => {
                    //创建Blob对象
                    const blob = new Blob([response.data]);
                    //创建对象URL
                    const url = URL.createObjectURL(blob);
                    //创建a标签
                    const link = document.createElement('a');
                    link.href = url;
                    link.download = row.fileName;
                    //触发点击
                    document.body.appendChild(link);
                    link.click();
                    //释放内存
                    URL.revokeObjectURL(url);
                })
            },
            httprequest(param) {
                //拷贝图片到表单数据之中
                this.ruleForm.file = param.file
            },
            // 重置表单信息
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            // 显示头像
            hanchange(file) {
                //显示图片
                this.ruleForm.imageUrl = URL.createObjectURL(file.raw);
                console.log(this.ruleForm.imageUrl);
            },
        },
        created() {
            // 当组件创建时获取服务器数据
            this.interval = setInterval(() => {
                this.fetchServerData()
                // this.removeFile()
                console.log("定时器...")
            }, 2000)
            this.fetchServerData();
            this.getUserMessage();
        },
        beforeDestroy() {
            clearInterval(this.interval)
        }
    })
</script>

</body>

</html>
